<!DOCTYPE html>
<html lang="zh" class="theme-gray">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>子应用</title>
  <script src="/child-sdk.js"></script>
  <style>
    body {
      margin: 0;
      padding: 20px;
      font-family: Arial, sans-serif;
      transition: background-color 0.3s, color 0.3s;
    }
    
    .theme-gray { background-color: #f3f4f6; color: #1f2937; }
    .theme-blue { background-color: #dbeafe; color: #1e40af; }
    .theme-green { background-color: #dcfce7; color: #166534; }
    .theme-red { background-color: #fee2e2; color: #b91c1c; }
    .theme-purple { background-color: #f3e8ff; color: #6b21a8; }
    
    .container {
      max-width: 600px;
      margin: 0 auto;
    }
    
    .card {
      background: white;
      border-radius: 8px;
      padding: 20px;
      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
      margin-bottom: 20px;
    }
    
    button {
      background: #3b82f6;
      color: white;
      border: none;
      padding: 10px 15px;
      border-radius: 4px;
      cursor: pointer;
      font-size: 16px;
      margin: 5px;
      transition: background 0.3s;
    }
    
    button:hover {
      background: #2563eb;
    }
    
    .button-group {
      display: flex;
      flex-wrap: wrap;
      gap: 10px;
      margin-top: 15px;
    }
    
    .result-box {
      margin-top: 20px;
      padding: 15px;
      border: 1px solid #e5e7eb;
      border-radius: 4px;
      background: #f9fafb;
    }
    
    .error {
      color: #ef4444;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>子应用</h1>
    
    <div class="card">
      <h2>调用父应用方法</h2>
      <div class="button-group">
        <button onclick="callGetUserInfo()">获取用户信息</button>
        <button onclick="callCalculate()">计算 5+7</button>
        <button onclick="callGetWeather()">获取北京天气</button>
        <button onclick="callDivide()">计算 10/0 (错误)</button>
      </div>
      <div id="result" class="result-box">结果将显示在这里</div>
    </div>
    
    <div class="card">
      <h2>发送消息到父应用</h2>
      <input type="text" id="childMessage" placeholder="输入消息..." style="width:100%;padding:10px;margin-bottom:10px;">
      <button onclick="sendMessageToParent()">发送消息</button>
    </div>
    
    <div class="card">
      <h2>设置主题</h2>
      <div class="button-group">
        <button onclick="setTheme('gray')">默认</button>
        <button onclick="setTheme('blue')">蓝色</button>
        <button onclick="setTheme('green')">绿色</button>
        <button onclick="setTheme('red')">红色</button>
        <button onclick="setTheme('purple')">紫色</button>
      </div>
    </div>
    
    <div class="card">
      <h2>请求帮助</h2>
      <button onclick="requestHelp('按钮点击无响应')">UI问题</button>
      <button onclick="requestHelp('数据加载失败')">数据问题</button>
      <button onclick="requestHelp('页面显示异常')">显示问题</button>
    </div>
  </div>

  <script>
    // 初始化完成后通知父应用
    document.addEventListener('DOMContentLoaded', function() {
      ParentApp.ready();
    });
    
    // 调用父应用的getUserInfo方法
    async function callGetUserInfo() {
      try {
        const result = await ParentApp.callFunction('getUserInfo');
        document.getElementById('result').innerHTML = 
          `<strong>用户信息:</strong><br>
          姓名: ${result.name}<br>
          年龄: ${result.age}<br>
          邮箱: ${result.email}`;
      } catch (error) {
        showError(error);
      }
    }
    
    // 调用父应用的calculate方法
    async function callCalculate() {
      try {
        const result = await ParentApp.callFunction('calculate', 5, 7);
        document.getElementById('result').innerHTML = 
          `<strong>计算结果:</strong> 5 + 7 = ${result}`;
      } catch (error) {
        showError(error);
      }
    }
    
    // 调用父应用的getWeather方法
    async function callGetWeather() {
      try {
        const result = await ParentApp.callFunction('getWeather', '北京');
        document.getElementById('result').innerHTML = 
          `<strong>北京天气:</strong> ${result}`;
      } catch (error) {
        showError(error);
      }
    }
    
    // 调用父应用的divide方法（故意制造错误）
    async function callDivide() {
      try {
        const result = await ParentApp.callFunction('divide', 10, 0);
        document.getElementById('result').innerHTML = 
          `<strong>计算结果:</strong> 10 / 0 = ${result}`;
      } catch (error) {
        showError(error);
      }
    }
    
    // 发送消息到父应用
    function sendMessageToParent() {
      const message = document.getElementById('childMessage').value;
      if (message) {
        ParentApp.sendMessage(message);
        document.getElementById('childMessage').value = '';
      }
    }
    
    // 设置主题
    function setTheme(theme) {
      document.documentElement.className = 'theme-' + theme;
      ParentApp.setTheme(theme);
    }
    
    // 请求帮助
    function requestHelp(issue) {
      ParentApp.requestHelp(issue);
    }
    
    // 显示错误
    function showError(error) {
      document.getElementById('result').innerHTML = 
        `<div class="error"><strong>错误:</strong> ${error.message}</div>`;
    }
  </script>
</body>
</html>